<template>
  <div class="app-container orderAppContainer">
    <div class="block">
      <el-row>
        <el-col :span="24">
          <el-button
            type="success"
            size="mini"
            icon="el-icon-edit"
            @click.native="openSendOutForm"
            v-show="form.statusName == '待发货'"
            >发货
          </el-button>
          <el-button type="default" size="mini" @click="printOrder" class="printOrderStyle"
            >打 印</el-button
          >
        </el-col>
      </el-row>
    </div>

    <el-form ref="print" label-width="150px">
      <el-row>
        <h3 class="orderDetailsH3Style">基本信息</h3>
        <el-col :span="12">
          <el-form-item label="订单号">
            <span> {{ form.orderSn }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="订单用户">
            <!-- <router-link :to="{ path: 'shopUserDetail?id=' + form.user.id }">
              {{ form.user.mobile }}({{ form.user.nickName }})
            </router-link> -->
            <div @click="orderUserDetailFn(form)" class="orderDetailClickCss">
              {{ form.user.mobile }}({{ form.user.nickName }})
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态">
            <span>
              <strong>{{ form.statusName }} </strong></span
            >
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="订单备注">
            <span>{{ form.message }} </span>
          </el-form-item>
        </el-col>
        <h3 class="orderDetailsH3Style">收货信息</h3>
        <el-col :span="12">
          <el-form-item label="收货人">
            <span>{{ form.consignee }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话">
            <span>{{ form.mobile }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收货地址">
            <span>{{ form.consigneeAddress }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <h3 class="orderDetailsH3Style">订单明细</h3>
        </el-col>
        <el-table :data="form.items" border fit>
          <el-table-column label="商品">
            <template slot-scope="scope">
              <div @click="goodsEditClickFn(scope)" class="orderDetailClickCss">
                {{ scope.row.title }}

              </div>
              <!-- <router-link :to="{ path: 'goodsEdit?id=' + scope.row.goods.id }">
              </router-link> -->
            </template>
          </el-table-column>
          <el-table-column label="图片">
            <template slot-scope="scope">
              <img
                :src="
                  'http://localhost:9528/dev-api/file/getImgStream?idFile=' + scope.row.goods.pic
                "
                style="width:50px;"
              />
            </template>
          </el-table-column>
          <el-table-column label="价格">
            <template slot-scope="scope">
              {{ formatPrice(scope.row.price) }}
            </template>
          </el-table-column>
          <el-table-column label="数量">
            <template slot-scope="scope">
              {{ scope.row.count }}
            </template>
          </el-table-column>
          <el-table-column label="合计">
            <template slot-scope="scope">
              {{ formatPrice(scope.row.totalPrice) }}
            </template>
          </el-table-column>
          <el-table-column label="">
            <!--todo 打印的时候总是无法打印表格最后一列，此列用于占位-->
          </el-table-column>
        </el-table>
        <el-col :span="8">
          <el-form-item label="总金额">
            <span>{{ formatPrice(form.totalPrice) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="优惠券抵扣金额">
            <!-- <span> {{ formatPrice(form.couponPrice) }}</span> -->
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="实付金额">
            <span>{{ formatPrice(form.realPrice) }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog title="发货" :visible.sync="shipping.show" width="40%">
      <el-form ref="form" :model="shipping" label-width="200px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="快递公司">
              <el-select v-model="shipping.idExpress" placeholder="请选择">
                <el-option
                  v-for="item in expressList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="快递单号">
              <el-input v-model="shipping.shippingSn" minlength="1"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="sendOut">提交</el-button>
          <el-button @click.native="shipping.show = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { orderDetailInterface, queryAll } from "@/api/orderdetail";
export default {
  data() {
    return {
      form: {
        user: { id: "", name: "" },
        address: { name: "", tel: "", addressDetail: "" }
      },
      apiUrl: "",
      expressList: [],
      shipping: {
        show: false,
        id: "",
        idExpress: "",
        shippingSn: ""
      }
    };
  },
  created() {
    this.form.orderSn = this.$route.query.orderSn;
  },
  mounted() {
    this.init();
  },
  methods: {
    // 商品详情
    goodsEditClickFn(scope){
      let _self = this;
      console.log(scope.row.goods.id);
      _self.$router.push({
        name: "ProductEditing",
        query: {
          id: scope.row.goods.id
        }
      });
    },
    // 用户详情
    orderUserDetailFn(form){
      let _self = this;
      console.log(form.user.id);
      _self.$router.push({
        name: "detail",
        query: {
          id: form.user.id
        }
      });
    },
    orderDetailQuerry(row) {
      let _self = this;
      console.log(row.row.orderSn);
      _self.$router.push({
        name: "orderDetail",
        query: {
          orderSn: row.row.orderSn
        }
      });
    },
    init() {
      this.fetchData();
    },
    fetchData() {
      if (this.form.orderSn) {
        orderDetailInterface(this.form.orderSn).then(response => {
          console.log(response);
          this.form = response.data;
        });
      }
    },
    openSendOutForm() {
      if (this.expressList.length == 0) {
        queryAll().then(response => {
          this.expressList = response.data;
        });
      }
      this.shipping.show = true;
    },
    sendOut() {
      this.$confirm(
        this.$t("common.optionConfirm"),
        this.$t("common.tooltip"),
        {
          confirmButtonText: "提交",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          developmentUrl
            .sendOut(
              this.form.id,
              this.shipping.idExpress,
              this.shipping.shippingSn
            )
            .then(response => {
              this.fetchData();
              this.shipping.show = false;
              this.$message({
                message: "发货成功",
                type: "success"
              });
            });
        })
        .catch(() => {});
    },
    formatPrice(price) {
      if (price) {
        return "￥" + (price / 100).toFixed(2);
      }
      return "";
    },
    printOrder() {
      this.$print(this.$refs.print);
    }
  }
};
</script>
<style>
  .orderDetailClickCss{
    color: #74D6F5;
    cursor: pointer;
    text-decoration: none;
  }
  .printOrderStyle{
    margin-top: 30px;
    margin-bottom: 30px;

  }
  .orderAppContainer{
    background-color: #FFFFFF;
    padding-left: 20px;
  }
  .orderDetailsH3Style{
    margin-bottom: 20px;
  }
</style>
